<template>
	<view class="main">

		<img :src="imgUrl+'denglu-bj.png'" alt="" class="loginImgBg" />

		<view class="content" :style="'margin-top:'+(wxH.bottom+20)+'px;'">
			<view style="width: 100%;height: 24rpx;">

			</view>
			<text class="title">SIGN IN</text>
			<view class="topText">
				<p>欢迎登录,</p>
				<p>青年和大学生就业集市</p>
			</view>
			<view class="rightTop">
				<img :src="imgUrl+'denglu-ren.png'" alt="">
			</view>

			<view class="form">
				<view class="formItem">
					<view class="box">
						<div class="icon">
							<i class="icon-iphone"></i>
							<span></span>
						</div>
						<input type="number" placeholder="手机号" v-model="info.hname" placeholder-class="inp" />
					</view>
				</view>
				<view class="formItem" style="margin-bottom: 38px;">
					<view class="box">
						<div class="icon">
							<i class="icon-password"></i>
							<span></span>
						</div>
						<input type="number" placeholder="请输入验证码" v-model="info.code" placeholder-class="inp" />
						<view class="code">
							<p :class="{'disabled':isSend}" @click="sendCode">{{sendTitle || '发送验证码'}}</p>
						</view>
					</view>
				</view>
				<view class="formItem">
					<button @click="openHome()">登 录</button>
				</view>
				<view class="yhxy">
					<van-checkbox icon-size="26rpx" v-model="isSelected" @change="changeAgreement">
						我已经同意
						<span   @click.stop="toUrl('detail?cataName=用户协议')">《用户协议》</span>
						和
						<span  @click.stop="toUrl('detail?cataName=隐私政策')">《隐私政策》</span>
					</van-checkbox>
				</view>
				<view class="descLogin">
					<view class="descLogin-view" @click="dialogOpen">
						游客模式
					</view>
					<!-- <view class="descLogin-view" @click="youkeLogin(2)">
						求职者游客模式
					</view> -->
				</view>

				
			</view>
		</view>
		<navigator url="/pagesroot/register/register" class="register">
			<i></i>
			<p>注册</p>
		</navigator>
		
		<view class="dialog" v-if="dialogShow">
			<view class="dialog-body">
				<view class="dialog-title">
					请选择您的角色
				</view>
				<view class="dialog-view" @click="youkeLogin(1)">
					我是企业
				</view>
				<view class="dialog-view" @click="youkeLogin(2)">
					我是求职者
				</view>
				<view class="dialog-close" @click="dialogClose">
					<van-icon name="close" size="24px"/>
				</view>
			</view>
			
		</view>
		
		<view v-if="visible" class="modal-overlay">  
		    <view class="modal-overlay-body">  
		      <view class="modal-overlay-title">  
		        <text>服务协议和隐私政策</text> 
		      </view>   
			  <view class="modal-overlay-content">
				<span>欢迎使用。我们非常重视您的个人信息和隐私保护，在您使用服务之前，请您务必审慎阅读</span>
				<span style="color: crimson;" @click.stop="toUrl('detail?cataName=隐私政策')">《隐私政策》</span>
				<span>和</span>
				<span style="color: crimson;" @click.stop="toUrl('detail?cataName=用户协议')">《用户协议》</span>
				<span>，并充分理解协议条款内容。我们将严格按照您同意的各项条款使用您的个人信息，以便为您提供更好的服务。</span>
			  </view> 
			  <view class="modal-overlay-btn">
					<view @click="visible = false;">不同意</view>
					<view style="background-color: crimson; color: #fff;" @click="tongyi()">同意</view>
			  </view>
		    </view>  
		  </view>

	</view>
</template>

<script>
	import { login,ykqiyelogin,ykseekerlogin,sendCodeFunc } from '@/core/web-api/login';
	import {
		validateFunc
	} from "@/utils/util.js"
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				isSelected: false,
				wxH: this.$wxHanderInformation,
				info:{
					hname:"",
					code:""
				},
				time:59,
				timer:null,
				sendTitle: "",
				isSend: false,
				dialogShow:false,
				visible: false,  
			}
		},
		methods: {
			dialogOpen(){
				this.dialogShow = true;
			},
			dialogClose(){
				this.dialogShow = false;
			},
			youkeLogin(type){
				this.$store.commit("setYoukeType",type)
				
				if(type==1){
				ykqiyelogin().then(res=>{
					if(res.code==20000){  
						this.$store.commit("setYkqiyeToken",res.data.token);
						uni.reLaunch({
							url:"/pages/youke/web/home/home"
						})
					}else{
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
				}else{ 
					ykseekerlogin().then(res=>{
						if(res.code==20000){ 
							this.$store.commit("setYkseekerToken",res.data.token);
							uni.reLaunch({
								url:"/pages/youke/web/home/home"
							})
						}else{
							uni.showToast({
								title: res.message,
								icon: "none"
							})
						}
					})
				}
				 
				this.dialogClose()
			},
			toUrl(url){
				if(url.includes('register') || url.includes('detail')){
					uni.navigateTo({
						url
					})
					return;
				}
				uni.redirectTo({
					url
				})
			},
			/**
			 * 发送验证码
			 */
			sendCode() {
				if(this.codeValidate()!=2) return;
				if (this.isSend) return;
				this.isSend = true;
				this.sendTitle = `${this.time}秒后重发`
				this.sendTel();
				this.timer = setInterval(() => {
					this.time--;
					this.sendTitle = `${this.time}秒后重发`
					if (this.time == 0) {
						clearInterval(this.timer);
						this.time = 60;
						this.isSend = false;
						this.sendTitle = "";
					}
				}, 1000)
			},
			/**
			 * 发送手机号验证码
			 */
			sendTel() {
				sendCodeFunc({
					phone: this.info.hname,
					type: "login"
				}).then(res => {
					if (res.code == 20000) {
						uni.showToast({
							title: "发送成功"
						})
					}
				})
			},
			/**
			 * 验证手机号
			 */
			codeValidate(){
				let code = validateFunc(this.info.hname, 'tel')
				if (code != 2) {
					uni.showToast({
						title: code == 0 ? "请输入手机号码" : "手机号码格式错误",
						icon: "none"
					})
					return code;
				}
				return code;
			},
			/**
			 * 表单验证
			 */
			validate(){
				let title = "";
				let code = this.codeValidate()
				 if(code!=2){
					return false;
				}else if(!this.info.code){
					return "请输入验证码";
				}else if(!this.isSelected){
					this.visible = true;
					return false;
				}
			},
			tongyi(){
				this.isSelected = true
				this.visible = false
			},
			openHome() {
				let title = this.validate();
				if(title===false){
					return false;
				}
				if(title){
					uni.showToast({
						title,
						icon:"none"
					})
					return;
				}
				login(this.info).then(res=>{
					if(res.code==20000){
						this.$store.commit("setType",res.data.type);
						this.$store.commit("setToken",res.data.token);
						uni.reLaunch({
							url: "/pages/web/home/home"
						})
					}else{
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
				// uni.navigateTo({
				// 	url: "/pages-companies/home/home"
				// })
			},
			changeAgreement(event) {
				console.log(this.isSelected)
			},
		},
		computed:{
			...mapState(['imgUrl','token'])
		},
		onShow() {
			if(this.token){
				uni.reLaunch({
					url:"/pages/web/home/home"
				})
			}
		}
	}
</script>

<style scoped lang="less">
	@import url("./login.less");
	.modal-overlay{
		width: 100%;
		height: 100vh;
		background-color: rgba(0,0,0,.3);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9999;
		display: flex;
		justify-content: center;
		align-items: center;
		&-body{
			width: 90%;
			padding:30upx 30upx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 10upx;
			justify-content: space-around;
			align-items: center;
			position: relative;
		}
		&-title{
			width: 100%;
			text-align: center;
		}
		&-content{
			margin-top: 20upx;
			width: 100%;
		}
		&-btn{
			display: flex;
			justify-content: space-around;
			text-align: center;
			margin-top: 20upx;
			width: 100%;
			
			& view{
				width: 45%;
				height: 60upx;
				line-height: 60upx;
				border:1px solid #cccccc;
			}
		}
	}
	
	
	
	
	
	
	
</style>